<!--
 * @Description  : 我的订单
 * @Author       : MengFan Shan
 * @Date         : 2023-02-23
 * @LastEditors  : MengFan Shan
 * @LastEditTime : 2023-02-23
-->
<template>
  <AppPage headerTitle="选择签证地" class="bg-[#f8f8f8]" article-class="h-screen" header-class="bg-[#3d8ffd] ">
    <template #center><span class="c-white text-14">我的订单</span></template>
    <div class="bg-white px-15 order_nav">
      <nut-tabs v-model="selectedIndex" color="#3d8ffd" background="#fff" swipeable @change="onChange">
        <nut-tab-pane title="全部" pane-key="0">
        </nut-tab-pane>
        <nut-tab-pane title="待付款" pane-key="1">
        </nut-tab-pane>
        <nut-tab-pane title="办理中" pane-key="2">
        </nut-tab-pane>
        <nut-tab-pane title="已完成" pane-key="3">
        </nut-tab-pane>
        <nut-tab-pane title="退款/取消" pane-key="4">
        </nut-tab-pane>
      </nut-tabs>
    </div>
    <div class="px-15 pb-66">
      <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
        <orderItemList :item="item" v-for="(item, i) in orderList" :key="i" @refund="refund" />
      </nut-infinite-loading>
    </div>
    <!-- <nut-empty description="无数据" v-if="!orderList.length"></nut-empty> -->
  </AppPage>
  <tabBar :activeIndex="1" />

</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getOrderList } from '@/api/visa'
import orderItemList from '../components/orderItemList.vue'
import { _orderList } from './order.js'
import { useUserStore } from '@/store/modules/user/index.js'

const router = useRouter()
let selectedIndex = ref('0')
let orderList = ref([])
let page = ref(1)
let pageSize = ref(10)
let type = ref(1)
let totalSize = ref(0)
const infinityValue = ref(false);
const hasMore = ref(true);
const getOrderListFun = async () => {
  let params = {
    page: page.value,
    pageSize: pageSize.value,
    userId: useUserStore().uId,
    type: type.value
  }
  const result = await getOrderList(params)
  const { code, data } = result
  if (+code === 200) {
    if (+params.page === 1) {
      orderList.value = [...data]
    } else if (+params.page > 1) {
      orderList.value = [...orderList.value, ...data]
    }
    if (data.length === pageSize.value) {
      hasMore.value = true
    } else if (data.length < pageSize.value || data.length.length === 0) {
      hasMore.value = false
    }
  }
  infinityValue.value = false;
}

const loadMore = (done) => {
  infinityValue.value = true;
  page.value++
  getOrderListFun()
  // setTimeout(() => {
  //   let pageOrderList = _orderList.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  //   orderList.value = [...orderList.value, ...pageOrderList]
  //   if (orderList.value.length >= _orderList.length + 1) {
  //     hasMore.value = false;
  //   }
  //   infinityValue.value = false;
  // }, 1000);
};
const refund = () => {
  getOrderListFun()
};


const onChange = (val) => {
  selectedIndex.value = val.paneKey
  console.log('%c [ selectedIndex.value ]-90', 'font-size:13px; background:#39e451; color:#7dff95;', selectedIndex.value)
  page.value = 1
  type.value = +selectedIndex.value + 1
  getOrderListFun()
  // let list = JSON.parse(JSON.stringify(_orderList))
  // if (+val.paneKey === 0) {
  //   orderList.value = list
  //   return
  // }
  // let _list = []
  // list.forEach((value, index, array) => {
  //   if (+value.orderStatus === +val.paneKey) {
  //     _list.push(value)
  //   }
  // })
  // orderList.value = _list
}
getOrderListFun()
</script>

<style lang="scss">
.order_nav .nut-tabs__content {
  display: none;
}
.order_nav .nut-tabs__titles-item.active {
  color: rgb(61, 143, 253);
}
.order {
  margin: 15px;
}
</style>
